import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index.js'

/* 一级路由：   但凡是单个页面，独立展示的，都是一级路由  (登录  注册   首页架子   文章详情 ...)
   二级路由：   但凡是有类似于tab栏切换效果的（pc端一般在左侧 或 顶部。 移动端一般在底部 或 顶部，也有的在左侧）
   路由设计：
    - 登录页 （一级） login
    - 首页（一级） layout
      - 数据看板（二级）dashboard
      - 文章管理（二级）article */

// 懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术
// // 一级路由组件
// import login from '@/views/login/index.vue'
// import layout from '@/views/layout/index.vue'
// // 二级路由组件
// import dashboard from '@/views/dashboard/index.vue'
// import article from '@/views/article/index.vue'
// 懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术

Vue.use(VueRouter)

const routes = [
  // 重定向 : 路径a  变成 路径b
  { path: '/', redirect: '/layout' },
  // 懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术
  { path: '/login', component: () => import('@/views/login/index.vue') },
  {
    path: '/layout',
    // 懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术
    component: () => import('@/views/layout/index.vue'),
    children: [
      { path: '/', redirect: '/dashboard' },
      // 懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术
      { path: '/dashboard', component: () => import('@/views/dashboard/index.vue') },
      // 懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术  懒加载技术
      { path: '/article', component: () => import('@/views/article/index.vue') }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 前置全局路由导航守卫
router.beforeEach((to, from, next) => {
  // 登录权限 : 有权限就正常跳转,没有权限就跳转登录页
  // 可以跳转 : 有token || 跳转登录页
  if (store.state.user.token || to.path === '/login') {
    next()
  } else {
    next('/login')
  }
})

export default router
